// 定义一个名为 BookForm 的对象，用作 Vue 组件
const BookQueryForm = {
    // 组件名称
    name: 'BookQueryForm', // 组件模板
    template: `  
   <div>
    <form class="book-query-form" @submit.prevent="onSearch">  
    <div class="form-item"><input v-model="query.title" placeholder="书名" type="text" /></div>  
    <div class="form-item"><input v-model="query.author" placeholder="作者" type="text" /></div>  
    <div class="form-item"><input v-model="query.isbn" placeholder="ISBN" type="text" /></div>  
    <div class="form-item"><input v-model="query.publisher" placeholder="出版社" type="text" /></div>  
    <div class="form-item">  
        <input v-model.number="query.yearFrom" placeholder="出版年起" type="number" min="0" style="width: 78px; display:inline-block" />  
        <span style="margin:0 3px;">-</span>  
    <input v-model.number="query.yearTo" placeholder="出版年止" type="number" min="0" style="width: 78px; display:inline-block" />  
  </div>  
 <div class="form-item" style="width: 120px">  
  <select id="category-select" v-model="query.categoryId">  
    <option value="">全部类型</option>  
    <option v-for="category in categories" :key="category.categoryId" :value="category.categoryId">  
      {{ category.categoryName }}  
    </option>  
  </select>  
</div>  
  <div class="form-item">  
    <select v-model="query.status">  
      <option value="">全部状态</option>  
      <option value="1">上架</option>  
      <option value="0">未上架</option>  
    </select>  
  </div>  
  
    <!-- 新增价格区间查询字段 -->
      <div class="form-item">
        <input v-model.number="query.priceFrom" placeholder="最低价格" type="number" min="0" style="width: 78px; display:inline-block" />
        <span style="margin:0 3px;">-</span>
        <input v-model.number="query.priceTo" placeholder="最高价格" type="number" min="0" style="width: 78px; display:inline-block" />
      </div>
      <!-- 新增馆藏地址模糊查询字段 -->
      <div class="form-item"><input v-model="query.location" placeholder="馆藏地址" type="text" /></div>
      <!-- 新增语言精确匹配查询字段 -->
      <div class="form-item">
        <input v-model="query.language" placeholder="语言" type="text" />
      </div>
  <div>  
    <el-button type="primary" class="button-class" native-type="submit " round>查询</el-button>
    <el-button type="primary" class="button-class" @click="onReset " round>重置</el-button>
       
  </div>  
</form>  
</div>
  `,
    // 组件属性
    props: {
        categories: {
            type: Array, default: () => []
        }
    }, // 自定义事件
    emits: ['search'], // 组件设置函数
    setup(props, {emit}) {
        const query = Vue.ref({
            categoryId: '',
            status: ''
        })

        const onSearch = () => {
            emit('search', {...query.value});
        }

        const onReset　  = () => {
            query.value = {};
            emit('search', {
                categoryId: '',
                status: ''
            }) // 重置时也可自动搜索全部
        }
        // 返回表单数据及方法
        return {query, onSearch, onReset};
    }
};
